<template>
  <div class="app-container">
    <div style="padding: 20px;">
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            新增/修改
          </strong>
        </el-col>
      </el-row>

      <div style="padding:20px">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="门店" prop="store">
            <el-select
              v-model="form.store"
              filterable
              @change="form.type = null;getTypes();$forceUpdate()"
            >
              <el-option
                v-for="item in stores"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="班次" prop="type">
            <el-select
              v-model="form.type"
              filterable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name+'('+ item.store.__toString+')'"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="phase">
            <el-select
              v-model="form.phase"
              filterable
              @change="changePhase"
            >
              <el-option
                v-for="item in phases"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="起扣时间(分钟)">
            <el-input-number v-model="form.fromMinute" :min="1" :max="9999" :disabled="disabled" />
            <div class="help-text" style="display: flex;">
              <div>
                <p class="el-icon-info" />
              </div>
              <div>
                <p v-html="'9999为区间封顶时间'" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="扣罚金额" prop="price">
            <el-input v-model="form.price" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      form: {
        store: null,
        type: null,
        phase: null,
        price: '',
        fromMinute: 1
      },
      disabled: false,
      stores: [],
      types: [],
      phases: [
        { name: '早退', id: 0 },
        { name: '迟到', id: 1 },
        { name: '缺勤(下班)', id: 2 },
        { name: '缺勤(上班)', id: 3 }
      ]
    }
  },
  created() {
    this.getStores()
    if (this.id) {
      this.axios.get(`/manage/attendance-settings/${this.id}`).then((res) => {
        this.form.store = res.data.store?.id
        this.getTypes()
        this.form.type = res.data.type?.id
        if (res.data.phase) {
          if (res.data.fromMinute >= 9999) {
            this.form.phase = 3
            this.disabled = true
          } else {
            this.form.phase = 1
          }
        } else {
          if (res.data.fromMinute >= 9999) {
            this.form.phase = 2
            this.disabled = true
          } else {
            this.form.phase = 0
          }
        }
        this.form.price = res.data.price
        this.form.fromMinute = res.data.fromMinute
      })
    }
  },
  methods: {
    changePhase(e) {
      if (e > 1) {
        this.disabled = true
        this.form.fromMinute = 9999
      } else {
        this.disabled = false
      }
      this.$forceUpdate()
    },
    getTypes() {
      this.types = []
      let filter = `1`
      if (this.form.store) {
        filter += ` && entity.getStore().getId() == ${this.form.store}`
      }
      this.axios.get(`/manage/attendance-types`, {
        params: {
          '@filter': filter,
          limit: 10000000
        }}).then((res) => {
        this.types = res.data
      })
    },
    getStores() {
      this.axios.get(`/manage/stores`, {
        params: {
          '@filter': `entity.getStatus() == "0"`,
          limit: 10000000
        }
      }).then((res) => {
        this.stores = res.data
      })
    },
    cleanBlankAttributes(data) {
      for (var propName in data) {
        if (data[propName] === null || data[propName] === undefined) {
          delete data[propName]
        }
      }
    },
    onSubmit() {
      if (!this.form.store) {
        this.$message.error('请选择门店！')
        return
      }
      if (!this.form.type) {
        this.$message.error('请选择班次！')
        return
      }
      if (this.form.phase === null) {
        this.$message.error('请选择类型！')
        return
      }
      if (!this.form.price) {
        this.$message.error('请填写金额！')
        return
      }

      if (this.form.phase === 1 || this.form.phase === 3) {
        this.form.phase = true
      } else {
        this.form.phase = false
      }

      if (this.id) {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.put(`/manage/attendance-settings/${this.id}`, this.form).then((res) => {
          this.$message.success('修改成功！')
          this.$router.go(-1)
          loading.close()
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.post(`/manage/attendance-settings`, this.form).then(staff => {
          loading.close()
          this.$message.success('修改成功！')
          this.$router.go(-1)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.help-text {
  display: flex;
  p {
    color: gray;
    line-height: 1.3em;
  }
  div {
    padding: 0 3px;
  }
}
</style>
